<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>配网监控系统</title>
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<link rel="stylesheet" type="text/css"
			href="<s:url value='../css/main.css'/>">
		<link rel="stylesheet" type="text/css"
			href="<s:url value='../jquery-easyui/themes/stategrid/easyui.css'/>">
		<link rel="stylesheet" type="text/css"
			href="<s:url value='../jquery-easyui/themes/icon.css'/>">
		<script type="text/javascript"
			src="<s:url value='../jquery-easyui/jquery-1.7.2.min.js'/>"></script>
		<script type="text/javascript"
			src="<s:url value='../jquery-easyui/jquery.easyui.min.js'/>"></script>
		<script type="text/javascript"
			src="<s:url value='../jquery-easyui/locale/easyui-lang-zh_CN.js'/>"></script>
		<script type="text/javascript"
			src="<s:url value='../js/common/commonUtil.js'/>"></script>
		<script type="text/javascript"
			src="<s:url value='../js/common/datagridCommon.js'/>"></script>
		<style type="text/css">
.resourceTable {
	margin: 4px;
	width: 197px;
	float: left;
	font-size: 12px;
}

.resourceTable,.resourceTable tr,.resourceTable td {
	border-collapse: collapse;
	border: 1px solid #337EC1;
	padding: 2px;
	padding-left: 4px;
}

.resourceTable tr {
	line-height: 18px;
}

.resourceTable th {
	background-color: #A6E5B9;
	line-height: 20px;
	color: #0C2751;
}
</style>

		<script type="text/javascript"><!--
		
		$(function(){
		
			$('#distributeds').droppable({
        	
				accept:'.subItem,.resourceTable',
				onDragEnter:function(e,source){
					$(source).draggable('options').cursor='auto';
					$(this).addClass('over');
				},
				onDragLeave:function(e,source){
					$(source).draggable("options").cursor = "not-allowed";  
                    $(this).removeClass("over");  
				},
				onDrop:function(e,source){
					//drop(e, source, "undistributeds", this);
					if ($(source).hasClass("resourceTable")) {
		        		var tableId = $(source).attr("id");
		        		if ($("#" + tableId, $(this)).size() > 0) {
							var resTableBody = $("#" + tableId + " tbody", $(this));
							resTableBody.append($(source).find("tr:gt(0)"));
							if ($("#" + tableId, $("#undistributeds")).css("display") == "none") {
								$("#" + tableId, $("#undistributeds")).show();
								$("#" + tableId, $(this)).hide();
							} else {
								$("#" + tableId, $("#undistributeds")).hide();
								$("#" + tableId, $(this)).show();
							}
						} else {
							$(this).append(source);
						}
		        	} else {
		        		var tableId = $(source).attr("tableId");
						var title = $(source).attr("title");
		
						if ($("#" + tableId, $(this)).size() > 0) {
							var resTableBody = $("#" + tableId + " tbody", $(this));
							resTableBody.append(source);
						} else {
							var newTable = $("<table class='resourceTable' id='" + tableId + "'>");
							newTable.append(source);
							$(this).append(newTable);
							var temp = $($("#" + tableId + " tr", $("#undistributeds"))[0]).clone();
							$("#" + tableId + " tbody", $(this)).prepend(temp);
						}
						
						if ($("#" + tableId + " tr", $("#undistributeds")).size() == 0 || $("#" + tableId + " tr", $("#undistributeds")).size() == 2) {
							$("#" + tableId, $("#undistributeds")).remove();
						}
					}
				}
			});
			
			$('#undistributeds').droppable({
			
				onDragEnter:function(e,source){
					$(source).draggable('options').cursor='auto';
					$(this).addClass('over');
				},
				onDragLeave:function(e,source){
					$(source).draggable("options").cursor = "not-allowed";  
                    $(this).removeClass("over");  
				},
				onDrop:function(e,source){
					//drop(e, source, "distributeds", this);
					if ($(source).hasClass("resourceTable")) {
		        		var tableId = $(source).attr("id");
		        		if ($("#" + tableId, $(this)).size() > 0) {
							var resTableBody = $("#" + tableId + " tbody", $(this));
							resTableBody.append($(source).find("tr:gt(0)"));
							if ($("#" + tableId, $("#distributeds")).css("display") == "none") {
								$("#" + tableId, $("#distributeds")).show();
								$("#" + tableId, $(this)).hide();
							} else {
								$("#" + tableId, $("#distributeds")).hide();
								$("#" + tableId, $(this)).show();
							}
						} else {
							$(this).append(source);
						}
		        	} else {
		        		var tableId = $(source).attr("tableId");
						var title = $(source).attr("title");
		
						if ($("#" + tableId, $(this)).size() > 0) {
							var resTableBody = $("#" + tableId + " tbody", $(this));
							resTableBody.append(source);
						} else {
							var newTable = $("<table class='resourceTable' id='" + tableId + "'>");
							newTable.append(source);
							$(this).append(newTable);
							var temp = $($("#" + tableId + " tr", $("#distributeds"))[0]).clone();
							$("#" + tableId + " tbody", $(this)).prepend(temp);
						}
						
						if ($("#" + tableId + " tr", $("#distributeds")).size() == 0 || $("#" + tableId + " tr", $("#distributeds")).size() == 2) {
							$("#" + tableId, $("#distributeds")).remove();
						}
					}
				}
			});
			
			// 加载未分配的资源（权限）
			$.ajax({
	            type: "POST",
	            url: "../system/showUndistrituteds.action",
	            data: "roleId=2",
	            dataType: "json",
	            success: function callback(data){
	            	
	            	buildTable("undistributeds", data);
	            	appendDraggable();
	            }
	        });
	        
	        // 加载已分配的资源（权限）
	        $.ajax({
	            type: "POST",
	            url: "../system/showDistrituteds.action",
	            data: "roleId=2",
	            dataType: "json",
	            success: function callback(data){
	            	
	            	buildTable("distributeds", data);
					appendDraggable();
	            }
	        });
			
        	// 构建资源模块表格，并附加到panel中
			function buildTable(divId, data) {
				for(var i=0; i<data.length; i++) {// 按一级菜单分模块，所以data为二维数组
		            	
	           		var resourceArr = data[i]; // 第一个元素为模块名称
	           		var tableStr = "<table class='resourceTable' id='table" + resourceArr[0].rsId + "'>";
	           		for (var j=0; j<resourceArr.length; j++) {
	            		if (j == 0) {
	            			tableStr += "<tr class='item' tableId='table" + resourceArr[j].rsPId + "' title='" + resourceArr[j].permissionId + "'><th align='center'>" + resourceArr[j].rsTitle + "</th></tr>";
	            		} else {
	            			tableStr += "<tr class='subItem' tableId='table" + resourceArr[j].rsPId + "' title='" + resourceArr[j].permissionId + "'><td align='left'>" + resourceArr[j].rsTitle + "</td></tr>";
	            		} 
	           		}
	           		tableStr += "</table>";
	           		
	           		// 附加到div中（panel）
	           		$("#" + divId).append(tableStr);
	           	}
			}
			
			// 给class为subItem、item的元素添加拖的能力
			function appendDraggable() {
				
	           	$('.subItem').draggable({
					proxy:'clone',
					revert:true,
					cursor:'pointer',
					onStartDrag:function(){
					},
					onStopDrag:function(){
					}
				});
				
				// 给class为item的元素添加拖的能力
            	$('.resourceTable').draggable({
            		handle: ".item",
					proxy:'clone',
					revert:true,
					cursor:'crosshair',
					onStartDrag:function(){
					},
					onStopDrag:function(){
					}
				});
			}
		
        	function drop(e, source, divId, obj) {
        	
	        	if ($(source).hasClass("resourceTable")) {
	        		var tableId = $(source).attr("id");
	        		if ($("#" + tableId, $(obj)).size() > 0) {
						var resTableBody = $("#" + tableId + " tbody", $(obj));
						resTableBody.append($(source).find("tr:gt(0)"));
						if ($("#" + tableId, $("#" + divId)).css("display") == "none") {
							$("#" + tableId, $("#" + divId)).show();
							$("#" + tableId, $(obj)).hide();
						} else {
							$("#" + tableId, $("#" + divId)).hide();
							$("#" + tableId, $(obj)).show();
						}
					} else {
						$(obj).append(source);
					}
	        	} else {
	        		var tableId = $(source).attr("tableId");
					var title = $(source).attr("title");
	
					if ($("#" + tableId, $(obj)).size() > 0) {
						var resTableBody = $("#" + tableId + " tbody", $(obj));
						resTableBody.append(source);
					} else {
						var newTable = $("<table class='resourceTable' id='" + tableId + "'>");
						newTable.append(source);
						$(obj).append(newTable);
						var temp = $($("#" + tableId + " tr", $("#" + divId))[0]).clone();
						$("#" + tableId + " tbody", $(obj)).prepend(temp);
					}
					
					if ($("#" + tableId + " tr", $("#" + divId)).size() == 0 || $("#" + tableId + " tr", $("#" + divId)).size() == 2) {
						$("#" + tableId, $("#" + divId)).remove();
					}
				}
        	}
			
		});
--></script>
	</head>

	<body>
		<div style="border: 1px; width: 49%; float: left; margin: 4px;">
			<div class="easyui-panel" title="未分配权限"
				style="width: 450px; height: 450px; padding: 10px; background: #fafafa; float: left;"
				data-options="iconCls:'icon-no'" id="undistributeds">
			</div>
		</div>

		<div style="border: 1px; width: 48%; margin: 4; float: right;">
			<div id="distributeds" class="easyui-panel" title="已分配权限"
				style="width: 450px; height: 450px; padding: 10px; background: #fafafa; float: right;"
				data-options="iconCls:'icon-ok'">
			</div>
		</div>
	</body>
</html>
